<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css布局</title>

    <!-- Bootstrap -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/shoto.css"/>

</head>
<body>

<div class=" container1">

    <div class="container">

        <div>
            <img class="tou" src="./shoto/tou.jpg" alt=""/>
            <img class="eou" src="./shoto/eou.bmp" alt=""/>
            <h1 class="h1">Never miss a photo again!</h1>
            <h2 class="h2">Shoto is the easiest way to get the photos your<br>
                friends have on their phone from your times together.
            </h2>
            <img class="tw1" src="./shoto/tw-1.jpg" alt=""/>
            <img class="tw2" src="./shoto/tw-2.jpg" alt=""/>

            <div>
                <input type="text" class="inpu" placeholder="Get Shoto.Enter phone#">
                <button class="btn3">dianji</button>
            </div>
        </div>
    </div>
</div>
<!--正文-->
<div class="wzd2">
    <div style="marginP: 50px">
        <div style="font-size: 20px"><h1>"display"属性</h1>
        display 是CSS中最重要的用于控制布局的属性。<br>
        每个元素都有一个默认的 display 值，这与元素的类型有关。<br>
        对于大多数元素它们的默认值通常是 block 或 inline 。<br>
        一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。</div>
        <div style="float: left;font-size: 20px"><img  src="./buju/1.png" alt=""/>
        <h1>margin:auto</h1>
        这里设置块级元素width可阻止它从左到右撑满、然后设置左右外边距为auto使其水平边距。<br>
        元素会占据所指定的宽度，然后剩余宽度会一分为二成为左右外边距。</div>
        <div class="zhwz"><img  src="./buju/2.png" alt=""/>
        <h1>max-width</h1>
        在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。<br>
        这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧
        </div>
     </div>
</div>
<div class="wzd">
        <div class="zhwz">
        <h1>盒模型</h1>
        当设置了元素的宽度，实际展现的元素却能够超出设置：因为元素的边框和内边距会撑开元素。<br>
        看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。</div>
        <div><img src="./buju/3.png" alt=""/>
        <img src="./buju/4.png" alt=""/></div>
            <div class="zhwz">
            <h1>box-sizing（新属性）</h1>
                当设置一个元素为box-sizing:border-box;时，此元素的内边距和边框不再会增加它的宽度。
                <div><img src="./buju/5.png" alt=""/>
                    <img src="./buju/6.png" alt=""/></div>
            </div>
      </div>
<div class="wzd2">
        <div class="zhwz">
            <h1>position属性</h1>position属性static（默认值）
            <div><img src="./buju/7.png" alt=""/>
                <img src="./buju/8.png" alt=""/></div>
            <div class="zhwz">relative 表现的和 static 一样static（默认值）
                <div><img src="./buju/9.png" alt=""/>
                    <img src="./buju/10.png" alt=""/></div>
                <div class="zhwz">在一个相对定位（position属性的值为relative）
                    的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。<br>
                    其他的元素则不会调整位置来弥补它偏离后剩下的空隙。</div>
            </div>
        </div>
</div>
<div class="wzd">
      <div class="zhwz">
          fixed 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，
              这意味着即便页面滚动，它还是会停留在相同的位置。<br>
              和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
          <div><img src="./buju/11.png" alt=""/>
           </div>
      </div>
    <div class="zhwz">absolute 是最棘手的position值。<br>
    absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。<br>
    如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，<br>
    并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。

        <div><img src="./buju/12.png" alt=""/>
        </div>
    </div>

    </div>
<div class="wzd2">
    <div class="zhwz">
        <h1>清除浮动</h1>
        <div><img src="./buju/13.png" alt=""/>
            <img src="./buju/14.png" alt=""/></div>
    </div>
</div>
<div class="wzd">
    <div class="zhwz">
        <h1>百分比设置宽度</h1>
        <div><img src="./buju/15.png" alt=""/>
           <div> 用百分比屏幕缩放时div也会随之变化，不会出现一些无法显示的情况。</div>
        </div>
    </div>
</div>
<div class="wzd2">
    <div class="zhwz">
        <h1>响应式设计</h1>响应式布局可以更好地适应各种屏幕大小和浏览器。
        <div><img src="./buju/16.png" alt=""/></div>
    </div>
    <div>
        <h1>使用inline-block我们就可以让代码更简单了</h1>
        <div><img src="./buju/17.png" alt=""/></div>
    </div>
</div>
<div class="wzd">
    <div class="zhwz">
        <h1>css定位</h1>CSS定位属性允许你为一个元素定位。<br>
        它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。<br>
        元素可以使用的顶部，底部，左侧和右侧属性定位。<br>
        然而，这些属性无法工作，除非是先设定position属性。<br>
        他们也有不同的工作方式，这取决于定位方法。
        <h1>静态定位</h1>HTML元素的默认值，即没有定位，元素出现在正常的流中。<br>
        静态定位的元素不会受到top, bottom, left, right影响。
        <h1>固定定位</h1>元素的位置相对于浏览器窗口是固定位置。<br>
        即使窗口是滚动的它也不会移动
        <h1>Relative 定位</h1>relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。<br>
        然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。<br>
        （再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）<br>
        相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在。
        <h1>Absolute 定位</h1>absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。<br>
        绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。<br>
        （因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）<br>
        绝对定位：ablution 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。

    </div>
</div>





<!--footer-->
<div style="background-color: black;width: auto;height: 50%">
    <div class="container">
        <div class="row">
            <div class="span2">
                <a href="#"> <img src="./shoto/c6-1.jpg" alt=""/>
                </a>
            </div>

            <div class="span2">
                <a href="#"> <img src="./shoto/c6-2.jpg" alt=""/>
                </a>
            </div>
            <div class="span2">
                <a href="#"> <img src="./shoto/c6-3.jpg" alt=""/>
                </a>
            </div>
            <div class="span2">
                <a href="#"> <img src="./shoto/c6-4.jpg" alt=""/>
                </a>
            </div>
            <div class="span2">
                <a href="#"> <img src="./shoto/c6-5.jpg" alt=""/>
                </a>
            </div>
            <div class="span2">
                <a href="#"> <img src="./shoto/c6-6.jpg" alt=""/>
                </a>
            </div>

        </div>
    </div>
</div>
<div class="foot" style="color: #0077b3">
    <h1 >Shoto</h1>Never miss a photo again!
    <div style="float: right;margin-right: 130px">
        <img src="./shoto/tw-1.jpg" alt=""/>
        <img src="./shoto/tw-2.jpg" alt=""/></div>
</div>

<div class="row">
    <div >
        <div style="float: left;margin-left: 130px"><p>Shoto, Inc</p></div>
        <div class="footwz">

            <a href="mailto:smiles@shoto.com" class="">Contact</a>

            <a href="#" class="a">Investors</a>
            <a href="#" class="a">Privacy</a>
            <a href="#" class="a">Terms</a>
        </div>
        <div class="foottu">
            <div class="bottomIcon2">
                <a href="#" class="d" target="_blank"><img src="./shoto/d-1.jpg" alt="facebook"></a>
                <a href="#" class="d" target="_blank"><img src="./shoto/d-2.jpg" alt="Instagram"></a>
                <a href="#" class="d" target="_blank"><img src="./shoto/d-3.jpg" alt="twitter"></a>
            </div>
        </div>
    </div>
</div>

</body>
</html>